<template>
  <div>
    <div class="pay-done-box">
      <img src="static/img/pay-success.png">
    <div class="getTime">{{num}}秒后自动返回主页</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayDone',
  data () {
    return {
      num: 5 };
  },
  created () {
    this.getTime();
  },
  methods: {
    getTime () {
      const timer = setInterval(() => {
        this.num--;
        if (this.num === 0) {
          this.$router.push('/');
          clearInterval(timer);
        }
      }, 1000);
    }
  }
};
</script>

<style scoped>
.pay-done-box {
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.getTime{
  font-size:20px;
  margin-top:20px;
}
</style>
